<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>在最深的海洋里</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


    <style>
        canvas, body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        body {
            background: url(src/ocean.jpg) center;
            background-size: cover;
        }


    </style>
</head>
<body>

<div></div>

<script>
    "use strict";function init(){c.width=window.innerWidth,c.height=window.innerHeight}function fish(){this.target=new Image,this.target.src="src/fish.png",this.fudu=70*Math.random(),this.offsetY=getMinRandom()*c.height,this.speed=.01*Math.random()+.01,this.cx=Math.random()*c.width,this.vx=3.5}function pawpaw(){this.deg=0,this.per=Math.PI/180,this.radius=10*Math.random()+6,this.speed=4*Math.random()+4,this.pos={oldx:Math.random()*c.width*.8+.1*c.width,oldy:c.height+Math.random()*c.height}}function animate(){ctx.clearRect(0,0,c.width,c.height),fishs.length<maxNumFish&&fishs.push(new fish),fishs=fishs.filter(function(t){return t.animate()}),pawpaws.length<30&&pawpaws.push(new pawpaw),pawpaws=pawpaws.filter(function(t){return t.animate()}),requestAnimationFrame(animate)}var c=document.createElement("canvas");document.body.appendChild(c);var ctx=c.getContext("2d"),maxNumFish=3558;init(),window.addEventListener("resize",init);var getMinRandom=function(){for(var t=Math.random(),i=Math.ceil(1/(1-t)),s=[],h=0;h<i;h++)s.push(Math.random());return Math.max.apply(null,s)},fishs=[];fish.prototype.animate=function(){var t=Math.PI/2,i=this.speed*this.cx,s=2*Math.PI,h=void 0,a=void 0,e=void 0;return this.cx+=this.vx,this.cy=-this.fudu*Math.sin(i)+this.offsetY,ctx.save(),ctx.translate(this.cx,this.cy),a=Math.floor(i/s),h=Math.floor((i-a*s)/t),0==h?e=i-a*s-(h+1)*t:1==h?e=i-a*s-h*t:2==h?e=(h+1)*t-(i-a*s):3==h&&(e=-(i-a*s-h*t)),ctx.rotate(.3*e),ctx.beginPath(),ctx.drawImage(this.target,0,0),ctx.closePath(),ctx.restore(),!(this.cx>c.width||this.cy>c.height||this.cy<0)};var pawpaws=[];pawpaw.prototype.animate=function(){this.deg+=this.speed,this.pos.y=this.pos.oldy-this.deg*this.per*10,this.pos.x=this.pos.oldx+this.speed*Math.cos(this.deg*this.per);var t=ctx.createRadialGradient(this.pos.x,this.pos.y,0,this.pos.x,this.pos.y,this.radius);return t.addColorStop(0,"transparent"),t.addColorStop(.99,"rgba(25,162,186,1)"),ctx.beginPath(),ctx.fillStyle="rgba(25,162,186,.6)",ctx.arc(this.pos.x,this.pos.y,this.radius,-Math.PI,0),ctx.closePath(),ctx.fill(),ctx.beginPath(),ctx.fillStyle=t,ctx.arc(this.pos.x,this.pos.y,this.radius,0,2*Math.PI),ctx.closePath(),ctx.fill(),!(this.pos.x>c.width||this.pos.x<0||this.pos.y<0)},ctx.globalCompositeOperation="lighter",animate();

</script>

</body>
</html>
